<template>
    <div style="display: flex">
        <div id="myChart" :style="{width: '800px', height: '500px'}"></div>
        <div id="mainline" :style="{width: '800px', height: '500px'}"></div>
    </div>
</template>

<script>

    export default {
        name: 'hello',
        data() {
            return {
                msg: 'Welcome to Your Vue.js App',
                salary: [],
                dept: [],
            }
        },
        mounted() {
            this.initSalary();
        }
        ,
        methods: {
            initSalary() {
                let myChart = this.$echarts.init(document.getElementById('myChart'));
                // 绘制图表
                myChart.setOption({
                    title: {text: '各部门工资账套统计图'},
                    tooltip: {},
                    xAxis: {
                        data: []
                    },
                    yAxis: {},
                    series: [{
                        name: '实际工资',
                        type: 'bar',
                        data: []
                    }]
                });
                let mainline = this.$echarts.init(document.getElementById('mainline'));
                mainline.setOption({
                    title: {text: '各职位人数统计图'},
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '14%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 14, name: '初级顾问'},
                                {value: 7, name: '高级顾问'},
                                {value: 8, name: '经理'},
                                {value: 2, name: '副总监'},
                                {value: 1, name: '总监'}
                            ]
                        }
                    ]
                });
                this.getRequest('/salary/sob/').then(resp => {
                    if (resp) {
                        resp.forEach(a => {
                            this.dept.push(a.name)
                            this.salary.push(a.realSalary)
                        });
                        myChart.setOption({
                            xAxis: {
                                data: this.dept
                            },
                            series:[
                                {
                                    data: this.salary
                                }
                            ]
                        });
                    }
                })
            },
        }
    }

</script>

<style scoped>

</style>